<template>
    <a-modal  :width='600'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    >
    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
      <a-form  :form='form'> 
        <a-row>
        <a-col  :span='12'> 
            <a-form-item label='用户名'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                {{formData.name}}
            </a-form-item>
            <a-form-item label='登录名'   :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" > 
                {{formData.loginName}}
            </a-form-item>
            <a-form-item label='登录密码' :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                ****** 
            </a-form-item>
            <a-form-item label='性别'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >   
                  <span  v-if='formData.gender == 1'>男</span>
                  <span  v-else>女</span>
            </a-form-item>
            <a-form-item label='角色'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
              {{roleData}} 

            </a-form-item> 
            <a-form-item label='是否可用'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" > 
                  <a-radio-group   v-model="formData.useable" disabled>
                    <a-radio value="1">可用</a-radio>
                    <a-radio value="0">停用</a-radio> 
                  </a-radio-group>
            </a-form-item> 
        </a-col>
        <a-col  :span='12'> 
            <a-form-item label='手机'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                 {{formData.mobile}}
            </a-form-item>
            <a-form-item label='email'   :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" > 
                {{formData.email}}
            </a-form-item>
            <a-form-item label='证件类型' :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" > 
                {{formData.idType}}
            </a-form-item>
            <a-form-item label='证件编号'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" > 
                {{formData.idNum}}
            </a-form-item>
            <a-form-item label='证件有效期'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                {{formData.idValidityDate | formatDates}} 
            </a-form-item>
            <a-form-item   label='标签'     :label-col='formLayout.labelCol'   :wrapper-col="formLayout.wrapperCol" >
                {{formData.tag}}  
            </a-form-item> 
        </a-col>
      </a-row>
      </a-form>
    </a-spin>
    </a-modal>
</template>

<script>
import  moment  from  'moment'
  import  {  submitAddUser , RoleList ,customerDetail  }  from  '@/api/system/index'
export default {
  name: 'customerModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
  },
  data () {
    return {
      spinning:false,
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      delayTime:500,
      showPass:false,/*是否显示修改密码*/
      modalProps:{
          title:'', 
      },
      formLayout:{
        labelCol:{
          span:7
        },
        wrapperCol:{
          span:16
        }
      },
      formData:{},
      roleData:'', 
                                                                                      
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){ 
  },
  methods:{ 
     handleCancel(e) {
      this.$emit('handleCancel') 
    },  
    handleOk(e) {
      this.$emit('handleCancel') 
         
    },
  },
 
  mounted(){
    this.$nextTick(()=>{ 
      this.$on('openDialog',async function(code){ 
        /*初始化数据*/
        this.roleData = ''

        this.modalProps.title = '客户详情'  

        this.spinning = true
        await customerDetail(code).then((res)=>{
          // console.log(res.data)
          let data = res.data.data
            /*设置默认值*/
            this.formData = data 

            this.formData.clientRoleList.forEach((item)=>{
              this.roleData+=item.name+','
            })
            this.spinning = false
        }) 
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
